<template>
  <el-dialog
    v-model="drawerVisible"
    :destroy-on-close="true"
    title="转移客户"
    width="30%"
    draggable
    align-center
    custom-class="user-info-dialog"
  >
    <div class="info-container">
      <el-form
        ref="ruleFormRef"
        label-width="100px"
        label-suffix=" :"
        :model="drawerProps.row"
        :hide-required-asterisk="drawerProps.isView"
        label-position="top"
        class="info-form"
      >
        <el-form-item label="负责人">
          <el-select v-model="drawerProps.row!.userId" placeholder="请选择负责人" clearable filterable>
            <el-option v-for="item in listAllUser" :key="item.name" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, onMounted, reactive } from "vue"; // getCurrentInstance
import { User } from "@/api/interface";
import { getListAllUser } from "@/api/modules/sys"; //getDict
import { ElMessage, FormInstance } from "element-plus";

let listAllUser: User.ResUserList[] = reactive([]);

interface DrawerProps {
  companyIds: [];
  row: Partial<User.ResUserList>;
  getTableList?: () => void;
  api?: (params: any) => Promise<any>;
}
const drawerProps = ref<DrawerProps>({
  row: {},
  companyIds: []
});

const drawerVisible = ref(false);

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      drawerProps.value.row.companyIds = drawerProps.value.companyIds;
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({ message: `设置成功！` });
      drawerVisible.value = false;
      drawerProps.value.getTableList!();
    } catch (error) {
      console.log(error);
    }
  });
};

// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser = data || [];
};

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
  getListAllUserFn();
};

onMounted(async () => {
  getListAllUserFn();
});
defineExpose({
  acceptParams
});
</script>
<style lang="scss" scoped>
:deep(.user-info-dialog) {
  display: flex;
  height: 600px;
}
.info-container {
  height: 80px;
}
.info-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0 30px;
  .el-select,
  .el-cascader,
  .el-date-editor {
    width: 100%;
  }
}
</style>
